<!--
 * @Author: zhangmengqiong
 * @Date: 2021-09-09 18:09:44
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-11-16 15:40:55
-->
<!--  -->
<template>
  <div id="wordCloude" class="box"></div>
</template>

<script>
import "echarts-wordcloud";
import { getWordcloud } from "../../api/index";
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    init() {
      getWordcloud();
    }
  },
  mounted() {
    this.init();
    let chart = this.$echarts.init(document.getElementById("wordCloude"));
    chart.setOption({
      series: [
        {
          type: "wordCloud",
          shape: "circle", // 圆形，形状
          // maskImage: null,
          // left: "center",
          // top: "center",
          // width: "100%",
          // height: "100%",
          // right: null,
          // bottom: null,
          // sizeRange: [12, 60],
          // rotationRange: [-90, 90],
          // rotationStep: 45,
          // gridSize: 1,
          drawOutOfBound: true, // 显示完全
          // layoutAnimation: true,
          // Global text style
          textStyle: {
            fontFamily: "sans-serif",
            fontWeight: "bold",
            color: function() {
              // 随机颜色
              // Random color
              return (
                "rgb(" +
                [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(",") +
                ")"
              );
            }
          },
          emphasis: {
            // 鼠标hover效果
            focus: "self",
            textStyle: {
              textShadowBlur: 10,
              textShadowColor: "#333"
            }
          },
          data: [
            {
              name: "Farrah Abraham",
              value: 60
            },
            {
              name: "violet5",
              value: 90
            },
            {
              name: "violet56",
              value: 80
            },
            {
              name: "花开半夏",
              value: 120
            }
          ]
        }
      ]
    });
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>
